﻿{extend name="layout/base" /}

{block name="meta"}
{__block__}
<style>
    .list-box li{float: left;height: 29px;line-height: 29px;padding: 0 13px;border: 1px solid #d7d7d7;margin-right: 6px;margin-bottom: 6px;cursor: pointer;}
    .list-box li.img{padding:0;width: 40px;height: 40px;}
    .list-box li img{width: 38px;height: 38px;}
    .list-box li:hover{color: #e4393c;}
    .list-box li.active{color: #e4393c;border-color: #e4393c;}
    .identical_0.active td{background: #f4f9fd;}
    .identical_1.active{display: none;}
    .rating {
        color: #999;
        font-size: 12px
    }
    .rating .fa-star {
        color: #FC0
    }
</style>
{/block}

{block name="body"}
<body class="compare_page">
{/block}

{block name="main"}

   <!-- Breadcrumbs -->
  
  <div class="breadcrumbs">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <ul>
              <li class="home"> <a title="{:__('Home')}" href="{:addon_url('mall')}">{:__('Home')}</a><span>&raquo;</span></li>
              <li class=""> <a title="{:__('Goods List')}" href="{:addon_url('mall/shop/index')}">{:__('Goods')}</a><span>&raquo;</span></li>
              <li><strong>{:__('Compare')}</strong></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- Breadcrumbs End --> 
 <!-- Main Container --> 
  <section class="main-container col1-layout">
    <div class="main container">
      <div class="col-main">
        <div class="compare-list mall-contrast">
          <div class="page-title">
            <h2>{:__('Compare').__('Products')}</h2>
          </div>
          <div class="table-responsive">
              <table class="table table-bordered table-compare">
                <tr>
                  <td class="compare-label">
                      {if($data['list'])}
                      <div class="choice">
                          <input type="checkbox" onclick="screenContrast(this,0)">
                          <label>高亮不同项</label>
                      </div>
                      <div class="choice">
                          <input type="checkbox" onclick="screenContrast(this,1)">
                          <label>隐藏相同项</label>
                      </div>
                      {else}
                      <div class="choice">请选择商品对比</div>
                      {/if}
                  </td>
                  {volist name="$data['list']" id="go"}
                  <td>
                      <a href="{:addon_url('mall/goods/detail','ids='.$go['id'])}">
                          <img src="{$go['goodsimg']}" alt="{$go['goodsname']}" style="width:180px; heigh:180px">
                      </a>
                      <p class="name">
                          <a href="{:addon_url('mall/goods/detail','ids='.$go['id'])}" target="_blank">{$go['goodsname']}</a>
                      </p>
                      <p class="price" id="goods-price-{$go['id']}">
                          ¥ <span>{$go['shopprice']}</span>
                      </p>
                      <div class="action">
                          <button class="button button-sm" onclick="location.href='/addons/mall/goods/detail?ids='+{$go['id']}"><i class="fa fa-eye"></i></button>
                          <button class="add-cart button button-sm"><i class="fa fa-shopping-cart"></i></button>
                          <button class="button button-sm"><i class="fa fa-heart"></i></button>
                          {if(count($data['list'])>1)}
                          <button class="button button-sm" onclick="javascript:contrastDel({$go['id']})"><i class="fa fa-close"></i></button>
                          {/if}

                      </div>
                  </td>
                  {/volist}
                </tr>
                  {volist name="$data['lists']" id="lis"}
                  <tr class="identical_{$lis['identical']}">
                      <td>
                          <div class="compare-label">{$lis['name']}</div>
                      </td>
                      {volist name="$data['list']" id="go"}
                      {php}$in = isset($lis['info'][$go['id']])?$lis['info'][$go['id']]:'--'{/php}
                      <td>
                          {if($lis['type']=='shop' || $lis['type']=='brand')}<div class="right-title">{$in}</div>{/if}
                          {if($lis['type']=='score')}
                              <div class="right-title rating">
                                  {for start="1" end="6"}
                                  {if($i<=$in)}
                                  <i class="fa fa-star"></i>
                                  {else/}
                                  <i class="fa fa-star-o"></i>
                                  {/if}
                                  {/for}
                              </div>
                          {/if}
                          {if($lis['type']=='spec')}
                          {if(isset($in['list']))}<div class="size">
                          <ul class="list-box list-unstyled">
                              {volist name="$in['list']" id="sp"}
                              {if($sp['isDefault']==1)}<input type="hidden" id="defaultSpec_{$go['id']}_{$sp['spec_id']}" class="defaultSpec_{$go['id']}" value="{$sp['itemId']}"/>{/if}
                              {if($sp['allowimgis']==1)}
                              <li class="img {if($sp['isDefault']==1)}active{/if}" onclick="javascript:choiceContrast(this,{$sp['itemId']},{$sp['spec_id']},{$go['id']});">
                                  <img class="goodsImg" src="{$sp['itemimg']}" title="{$sp['itemname']}" style="width:160px; heigh:160px">
                              </li>
                              {else}
                              <li class="{if($sp['isDefault']==1)}active{/if}" onclick="javascript:choiceContrast(this,{$sp['itemId']},{$sp['spec_id']},{$go['id']});">{$sp['itemname']}</li>
                              {/if}
                              {/volist}
                          </ul></div>
                          {else}
                              <div class="right-title">{$in}</div>
                          {/if}
                          {/if}
                      </td>
                      {/volist}
                  </tr>
                  {/volist}

              </table>
          </div>
      </div>
    </div>
  </section>

{/block}
{block name="js"}
{__block__}
<!-- flexslider js -->
<script type="text/javascript">
    //删除比较商品
    function contrastDel(id){
        $.ajax({
            url: '/addons/mall/goods/contrastDel',
            type: 'post',
            dataType: 'json',
            data: {id:id},
            success: function (ret) {
                location.href='/addons/mall/goods/compare';
            }
        });
    }
    //筛选条件
    function screenContrast(obj,id){
        if ($(obj).is(':checked')) {
            $(".identical_"+id).addClass('active');
        }else{
            $(".identical_"+id).removeClass('active');
        }
    }
    //筛选规格
    function choiceContrast(obj,itemId,cat_id,id){
        $(obj).addClass('active').siblings('.list-box li').removeClass('active');
        $("#defaultSpec_"+id+"_"+cat_id).val(itemId);
        var specIds = [];
        $(".defaultSpec_"+id).each(function(){
            specIds.push(parseInt($(this).val(),10));
        });
        specIds.sort(function(a,b){return a-b;});
        if(saleSpec.sku[id][specIds.join(':')]){
            stock = saleSpec.sku[id][specIds.join(':')].specStock;
            marketPrice = saleSpec.sku[id][specIds.join(':')].marketPrice;
            goodsPrice = saleSpec.sku[id][specIds.join(':')].specPrice;
        }
        $('#goods-price-'+id).html('¥ <span>'+goodsPrice+'</span>');
    }
</script>

{/block}
